<template>
	<view class="fs" style="{height:height+'px'}">
		<view class="dd" v-for="(item,index) in menus" :key="item.title" @click="enterorder">
			<view class="ddh">订单号：121355555</view>
			<view class="nimab">
				<image class="image" :src="item.icon" mode="aspectFill"></image>
				<view class="txt">
					<view class="text">{{item.title}}</view>
					<view class="text">{{item.jg}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: Number,
				default: 260
			}
		},
		data() {
			return {
				menus: [{
						icon: '../../static/sp.png',
						title: '订单dajdnajdakd',
						jg: '￥9999完成'
					},
					{
						icon: '../../static/sp.png',
						title: '订单smkhjahsdkhasg',
						jg: '￥9999完成'
					},
					{
						icon: '../../static/sp.png',
						title: '订单金大师不打不舒服，ahbsfhadasda',
						jg: '￥9999完成'
					},
					{
						icon: '../../static/sp.png',
						title: '订单四',
						jg: '￥9999完成'
					},
				]
			}
		},
		methods: {
			//获取订单并发送
			enterorder: function(e) {
				this.$emit('enterorder', e);
			}
		}
	}
</script>

<style lang="scss">
	.fs {
		width: 100%;

		background-color: #ffffff;

		.dd {

			background-color: white;
			border: 1rpx dashed #b3b3b3;
			width: 100%;

			.ddh {
				padding-left: 20rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #989898;
			}

			.nimab {
				display: flex;
				padding: 15rpx 20rpx;
				width: 100%;
				height: 100%;

				.image {
					flex: none;
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;

				}

				.txt {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding-left: 15rpx;

					.text {

						font-size: 28rpx;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}
		}

	}
</style>
